<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${channel.title} - ${site.title}</title>
  <meta name="keywords" content="${channel.seoKeywords}">
  <meta name="description" content="${channel.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  [#if config.greyStyle]
    <style>
      body {
        filter: grayscale(.95);
        -webkit-filter: grayscale(.95);
      }
    </style>
  [/#if]
</head>
<body>
[#include 'inc_header.html'/]

<div class="container mt-3">
  <div class="row">
    <div class="col-12">
      <!-- 功能导航 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5><i class="fas fa-couch"></i> 学习空间预约</h5>
        </div>
        <div class="card-body">
          <div class="row text-center">
            <div class="col-6 col-md-3 mb-3">
              <a href="#" class="btn btn-primary btn-lg" onclick="showFloorPlan()">
                <i class="fas fa-map-marked-alt"></i>
                <div>楼层平面图</div>
              </a>
            </div>
            <div class="col-6 col-md-3 mb-3">
              <a href="#" class="btn btn-secondary btn-lg" onclick="showSeatStatus()">
                <i class="fas fa-chair"></i>
                <div>座位状态</div>
              </a>
            </div>
            <div class="col-6 col-md-3 mb-3">
              <a href="#" class="btn btn-info btn-lg" onclick="showReservationList()">
                <i class="fas fa-list-alt"></i>
                <div>我的预约</div>
              </a>
            </div>
            <div class="col-6 col-md-3 mb-3">
              <a href="#" class="btn btn-warning btn-lg" onclick="showEquipmentList()">
                <i class="fas fa-laptop"></i>
                <div>设备借用</div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 座位选择区域 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5><i class="fas fa-map-pin"></i> 快速选择座位</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-6 col-md-4">
              <div class="seat-option" onclick="selectSeat(this, 'S1001')">
                <div class="seat-icon">💺</div>
                <div class="seat-info">
                  <h6>座位 S1001</h6>
                  <p>单人座 • 靠窗 • 电源</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-4">
              <div class="seat-option" onclick="selectSeat(this, 'D2001')">
                <div class="seat-icon">🪑</div>
                <div class="seat-info">
                  <h6>座位 D2001</h6>
                  <p>双人座 • 靠窗 • 靠墙插座</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-4">
              <div class="seat-option" onclick="selectSeat(this, 'M3001')">
                <div class="seat-icon">🛋</div>
                <div class="seat-info">
                  <h6>座位 M3001</h6>
                  <p>多人座 • 圆桌 • 安静</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预约信息 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5><i class="fas fa-calendar-plus"></i> 座位预约</h5>
        </div>
        <div class="card-body">
          <form id="reservationForm" class="needs-validation">
            <div class="row">
              <div class="col-md-6">
                <label for="reservationDate">预约日期</label>
                <input type="date" class="form-control" id="reservationDate" required>
              </div>
              <div class="col-md-6">
                <label for="startTime">开始时间</label>
                <input type="time" class="form-control" id="startTime" required>
              </div>
              <div class="col-md-6 mt-3">
                <label for="endTime">结束时间</label>
                <input type="time" class="form-control" id="endTime" required>
              </div>
              <div class="col-md-6 mt-3">
                <label for="purpose">预约事由</label>
                <select class="form-control" id="purpose">
                  <option value="">请选择事由</option>
                  <option value="exam">考试复习</option>
                  <option value="study">日常学习</option>
                  <option value="group">小组讨论</option>
                  <option value="project">项目讨论</option>
                </select>
              </div>
              <div class="col-md-12 mt-3">
                <label for="notes">备注说明</label>
                <textarea class="form-control" id="notes" rows="3" placeholder="请输入预约说明..."></textarea>
              </div>
            </div>
            <div class="col-12 text-center mt-3">
              <button type="button" class="btn btn-primary" onclick="submitReservation()">
                <i class="fas fa-check"></i> 提交预约
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- 预约规则说明 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5><i class="fas fa-info-circle"></i> 预约规则</h5>
        </div>
        <div class="card-body">
          <div class="rules-list">
            <div class="rule-item mb-3">
              <h6><i class="fas fa-clock text-warning"></i> 预约时长</h6>
              <p class="text-muted mb-1">每日最多8小时，每周最多40小时</p>
            </div>
            <div class="rule-item mb-3">
              <h6><i class="fas fa-calendar-check text-warning"></i> 预约次数</h6>
              <p class="text-muted mb-1">每周最多20次</p>
            </div>
            <div class="rule-item mb-3">
              <h6><i class="fas fa-link text-warning"></i> 连续限制</h6>
              <p class="text-muted mb-1">连续预约不超过4小时</p>
            </div>
            <div class="rule-item mb-3">
              <h6><i class="fas fa-user-check text-success"></i> 信用要求</h6>
              <p class="text-muted mb-1">预约后需签到，迟到15分钟取消资格</p>
            </div>
            <div class="rule-item">
              <h6><i class="fas fa-exclamation-triangle text-danger"></i> 违约后果</h6>
              <p class="text-muted mb-1">3次违约将暂停预约权限30天</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 使用统计 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5><i class="fas fa-chart-bar"></i> 今日统计</h5>
        </div>
        <div class="card-body">
          <div class="row text-center">
            <div class="col-6 col-md-3">
              <h3 class="text-primary">1,256</h3>
              <p class="text-muted">在馆人数</p>
            </div>
            <div class="col-6 col-md-3">
              <h3 class="text-success">89%</h3>
              <p class="text-muted">座位利用率</p>
            </div>
            <div class="col-6 col-md-3">
              <h3 class="text-info">4,774</h3>
              <p class="text-muted">总座位数</p>
            </div>
            <div class="col-6 col-md-3">
              <h3 class="text-warning">12</h3>
              <p class="text-muted">可用研讨间</p>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col-12">
              <h5><i class="fas fa-calendar-alt"></i> 本周使用率</h5>
              <div class="progress mt-2">
                <div class="progress-bar bg-success" style="width: 89%"></div>
                <div class="progress-bar bg-warning" style="width: 76%"></div>
                <div class="progress-bar bg-danger" style="width: 23%"></div>
              </div>
              <div class="mt-2 text-center text-muted">
                <small>目标使用率：85%</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// 模拟的静态数据
const staticData = {
  floors: [
    {
      floor: 1,
      name: "一楼",
      areas: [
        { id: 'S1001', name: '安静自习区', seats: 60, layout: 'grid' },
        { id: 'S1002', name: '讨论区', seats: 40, layout: 'group' },
        { id: 'D2001', name: '休闲区', seats: 30, layout: 'scatter' }
      ]
    },
    {
      floor: 2,
      name: "二楼",
      areas: [
        { id: 'S2001', name: '电子阅览区', seats: 50, layout: 'grid' },
        { id: 'M2001', name: '研讨室A', seats: 20, layout: 'conference' },
        { id: 'M2002', name: '研讨室B', seats: 30, layout: 'conference' }
      ]
    }
  ],
  reservations: [
    {
      id: 1001,
      seatId: 'S1001',
      date: '2024-04-20',
      startTime: '09:00',
      endTime: '12:00',
      purpose: 'exam',
      status: 'completed',
      user: '张三'
    }
  ]
};

// 获取楼层座位信息
function getFloorSeats(floorId) {
  const floor = staticData.floors.find(f => f.floor === floorId);
  if (!floor) return [];

  return floor.areas.map(area => {
    ...area.seats.map(seat => {
      id: seat.id,
      areaId: area.id,
      name: area.name,
      type: seat.type,
      icon: getSeatIcon(seat.type),
      status: getSeatStatus(seat.status)
    })
  }).flat();
}

// 获取座位图标
function getSeatIcon(type) {
  const icons = {
    'SINGLE': '💺',
    'DOUBLE': '🪑',
    'MULTIPLE': '🛋'
  };
  return icons[type] || '💺';
}

// 获取座位状态
function getSeatStatus(status) {
  const statusMap = {
    'AVAILABLE': { class: 'available', label: '可用' },
    'OCCUPIED': { class: 'occupied', label: '已占用' },
    'RESERVED': { class: 'reserved', label: '已预约' },
    'MAINTENANCE': { class: 'maintenance', label: '维护中' }
  };
  return statusMap[status] || statusMap['AVAILABLE'];
}

// 显示楼层平面图
function showFloorPlan(floorId) {
  const floor = staticData.floors.find(f => f.floor === floorId);
  if (!floor) return;

  const floorName = floor.name;
  const areas = floor.areas;

  let html = `
    <div class="floor-plan">
      <h4 class="text-center mb-4">${floorName}座位布局</h4>
      <div class="seat-grid" style="grid-template-columns: repeat(${Math.ceil(Math.sqrt(areas.length) / 6)}, 1fr); gap: 15px;">
  `;

  areas.forEach(area => {
    for (let i = 0; i < area.seats.length; i++) {
      const seat = area.seats[i];
      html += `
        <div class="seat ${seat.status}" onclick="selectSeat('${floorId}', '${area.id}', '${seat.id}')" title="${area.name} - ${seat.icon}">
          <span class="seat-number">${seat.id.substring(2)}</span>
        </div>
      `;
    }
  });

  html += `</div>
      <div class="floor-legend mt-3">
        <span class="legend-item available-seat"><i class="💺"></i> 可用</span>
        <span class="legend-item occupied-seat"><i class="🪑"></i> 已占用</span>
        <span class="legend-item reserved-seat"><i class="🔒"></i> 已预约</span>
        <span class="legend-item maintenance-seat"><i class="🔧"></i> 维护中</span>
      </div>
      </div>
    </div>
  `;

  document.getElementById('floorPlanContainer').innerHTML = html;
}

// 选择座位
function selectSeat(floorId, areaId, seatId) {
  const seatElements = document.querySelectorAll(`.seat:not(.occupied-seat):not(.reserved-seat)`);
  seatElements.forEach(el => el.classList.remove('selected'));

  event.target.classList.add('selected');
}

// 显示座位状态
function showSeatStatus() {
  alert('座位状态功能：显示当前所有座位的实时使用情况');
}

// 显示预约列表
function showReservationList() {
  const reservations = staticData.reservations;
  let html = '<div class="reservation-list">';

  if (reservations.length === 0) {
    html += '<div class="text-center text-muted my-4">暂无预约记录</div>';
  } else {
    html += '<h5 class="mb-3">我的预约记录</h5>';
    reservations.forEach(reservation => {
      html += `
        <div class="card mb-2">
          <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h6 class="mb-1">${reservation.purpose}</h6>
                <small class="text-muted">座位：${reservation.seatId} • ${reservation.date}</small>
              </div>
              <div class="text-right">
                <small>${reservation.startTime} - ${reservation.endTime}</small>
                <br>
              </div>
            </div>
          </div>
        </div>
      `;
    });
  }

  html += '</div>';

  // 创建模态框显示预约列表
  const modalHtml = `
    <div class="modal fade" id="reservationModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">预约记录</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ${html}
          </div>
        </div>
      </div>
    </div>
  `;

  // 移除已存在的模态框
  const existingModal = document.getElementById('reservationModal');
  if (existingModal) {
    existingModal.remove();
  }

  // 添加新模态框
  document.body.insertAdjacentHTML('beforeend', modalHtml);
  $('#reservationModal').modal('show');
}

// 显示设备列表
function showEquipmentList() {
  alert('设备借用功能：笔记本电脑5台、台式电脑8台、投影仪3台可用');
}

// 楼层平面图展示函数
function showFloorPlan(floorId) {
  if (!floorId) {
    alert('请选择楼层查看座位分布');
    return;
  }

  const floor = staticData.floors.find(f => f.floor === floorId);
  if (!floor) {
    alert('暂无该楼层信息');
    return;
  }

  let html = `
    <div class="floor-plan-display">
      <h5>${floor.name}座位分布</h5>
      <div class="row">
  `;

  floor.areas.forEach(area => {
    html += `
      <div class="col-md-6 mb-3">
        <div class="card">
          <div class="card-header">
            <h6>${area.name}</h6>
          </div>
          <div class="card-body">
            <p>座位数量：${area.seatCount}个</p>
            <p>布局类型：${area.layout}</p>
            <button class="btn btn-sm btn-primary" onclick="showFloorDetail('${area.id}')">查看详情</button>
          </div>
        </div>
      </div>
    `;
  });

  html += `</div></div>`;

  // 创建模态框显示楼层平面图
  const modalHtml = `
    <div class="modal fade" id="floorPlanModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">楼层平面图</h5>
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ${html}
          </div>
        </div>
      </div>
    </div>
  `;

  // 移除已存在的模态框
  const existingModal = document.getElementById('floorPlanModal');
  if (existingModal) {
    existingModal.remove();
  }

  // 添加新模态框
  document.body.insertAdjacentHTML('beforeend', modalHtml);
  $('#floorPlanModal').modal('show');
}

// 显示楼层详情
function showFloorDetail(areaId) {
  alert('查看区域详情：' + areaId);
}

// 根据状态筛选座位
function filterSeatsByStatus(status) {
  const seats = document.querySelectorAll('.seat');
  seats.forEach(seat => {
    seat.classList.remove('available-seat', 'occupied-seat', 'reserved-seat', 'maintenance-seat');
    if (seat.classList.contains(status)) {
      seat.classList.add(`${status}-seat`);
    }
  });
}

// 更新图例显示
function updateLegendDisplay() {
  const legendItems = document.querySelectorAll('.legend-item');
  legendItems.forEach(item => {
    item.style.display = item.classList.contains('active') ? 'block' : 'none';
  });
}



// 提交预约
function submitReservation() {
  const form = document.getElementById('reservationForm');

  if (form.checkValidity()) {
    const formData = new FormData(form);
    const newReservation = {
      id: Date.now(),
      seatId: document.querySelector('.seat.selected').getAttribute('data-seat-id'),
      floorId: document.querySelector('.floor-btn.active').getAttribute('data-floor'),
      areaId: document.querySelector('.seat.selected').getAttribute('data-area-id'),
      date: formData.get('reservationDate'),
      startTime: formData.get('startTime'),
      endTime: formData.get('endTime'),
      purpose: formData.get('purpose'),
      notes: formData.get('notes'),
      status: 'reserved'
    };

    staticData.reservations.push(newReservation);

    // 模拟提交成功
    alert('预约提交成功！座位：' + newReservation.seatId);

    // 重置表单
    form.reset();

    // 刷新座位状态
    const selectedSeat = document.querySelector(`.seat[data-seat-id="${newReservation.seatId}"]`);
    if (selectedSeat) {
      selectedSeat.classList.remove('available-seat');
      selectedSeat.classList.add('reserved-seat');
    }

    showReservationList();
    showFloorPlan(1);
  } else {
    alert('请填写完整的预约信息！');
  }
}

// 签到处理
function checkInReservation(reservationId) {
  const reservation = staticData.reservations.find(r => r.id == reservationId);
  if (reservation) {
    reservation.status = 'checked_in';
    reservation.checkInTime = new Date().toISOString();

    alert('签到成功！');
    updateReservationList();
    updateFloorPlan(reservation.floorId);

    // 30分钟后自动标记为已使用
    setTimeout(() => {
      reservation.status = 'completed';
      updateReservationList();
      updateFloorPlan(reservation.floorId);
    }, 1800000); // 30分钟
  }
}

// 获取状态文本
function getStatusText(status) {
  const statusTexts = {
    'available': '可用',
    'occupied': '已占用',
    'reserved': '已预约',
    'checked_in': '已签到',
    'completed': '已使用',
    'cancelled': '已取消'
  };
  return statusTexts[status] || status;
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
  // 设置默认日期为今天
  const today = new Date().toISOString().split('T')[0];
  document.getElementById('reservationDate').value = today;

  // 设置默认时间
  document.getElementById('startTime').value = '09:00';
  document.getElementById('endTime').value = '12:00';
});
</script>
[#include 'inc_footer.html'/]
<script>
// API调用统计
axios.get('${api}/channel/view/${channel.id?c}');
</script>

<style>
.seat-option {
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
}

.seat-option:hover {
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}

.seat-option.selected {
  border-color: #007bff;
  background-color: #e7f3ff;
}

.seat-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.seat-info h6 {
  margin-bottom: 5px;
  color: #333;
}

.seat-info p {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.rules-list .rule-item h6 {
  margin-bottom: 2px;
}

.rules-list .rule-item p {
  margin-bottom: 0;
}

.btn-lg {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn-lg i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.btn-lg div {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.badge {
  font-size: 0.75rem;
}

.seat {
  transition: all 0.2s ease;
}

.seat:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
</body>
</html>
[/#escape]
